<template>
  <div class="">
    <el-table
      :data="tableData"
      stripe
      border
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
      style="width:100%">
      <el-table-column v-if="isSelection" :type="selection" width="40" align="center"></el-table-column>
      <el-table-column v-for="(item, index) in tableLabel"
                       :key="index" :width="item.width ? item.width : ''"
                       :min-width="item.minWidth ? item.minWidth : ''"
                       :align="item.align" :label="item.label"
                       :prop="item.param"
                       :show-overflow-tooltip="item.isShow"
                       :sortable="item.sortable ? 'custom' : false">
        <template slot-scope="scope">
          <!-- 自定义渲染插槽 -->
          <slot v-if="item.slot" :name="item.param" :row="scope.row"></slot>
          <span v-else-if="item.render" >
           {{ item.render(scope.row) }}
          </span>
          <span v-else>{{scope.row[item.param]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableOption.label"
        :width="tableOption.width"
        :label="tableOption.label"
        align="center"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <span v-for="(item,index) in tableOption.options" :key="index" style="margin-left:5px">
            <el-button
              v-if="isAuth(item.auth)"
              @click="handleButton(item.methods, scope.row, scope.$index)"
              :type="item.type"
              :icon="item.icon"
              size="mini">
              {{item.label}}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/**
 * tableData     table数据
 * tableLabel    标头数据
 * tableOption   操作栏功能
 * isSelection   控制复选框的展示
 * sortable      控制标题的上下
 */
export default {
  name: 'index',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableLabel: {
      type: Array,
      default: () => []
    },
    tableOption: {
      type: Object,
      default: () => {}
    },
    isSelection: {
      type: Boolean,
      default: true
    },
    selection: {
      type: String,
      default: 'selection'
    }
  },
  methods: {
    // 操作栏按钮事件
    // methods 是定义该事件的名字
    handleButton(methods, row, index) {
      this.$emit('handleButton', { 'methods': methods, 'row': row, 'index': index })
    },
    // 排序按钮事件
    handleSortChange(val) {
      this.$emit('handleSortChange', val)
    },
    // 复选框事件
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>

<style scoped>

</style>
